<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('人脸库管理')" ></head>
<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
    $(function(){
        var data4Vue = {
            uri:'face',
            beans: [],
            users:[],
            data:null,
            bean: { id: 0, user_id:'' ,name: '',sex: '',birthday: '',state: '',tel: '',address: '',emgContactName: '',emgContactNum: '',criminalRecord: ''},
            pagination:{},
            file: null,
            search:''
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.list(0);
            },
            // computed: {
            //     searchData: function() {
            //         // this.list(0)
            //         alert(this.search)
            //         return this.users.filter(function (value) {
            //             // alert(value.match(this.search))
            //             return value.match(this.search)
            //         })
            //
            //     }
            // },
            watch: {
               'search':function (value) {
                   this.list(0)
               }
            },
            methods: {
                list:function(start){
                    var url =  this.uri;
                    axios.get(url).then(function(response) {
                        vue.data = response.data;
                        vue.users = vue.data.result['user_id_list'];
                        if(vue.users != null){
                            if(vue.search != ''){
                                vue.users = vue.users.filter(function (id) {
                                    return id.match(vue.search)
                                })
                            }
                        }else{

                        }
                    });
                },
                searchFunc:function () {
                    this.list(0)
                },
                add: function () {
                    if(!checkEmpty(this.bean.name, "姓名"))
                        return;
                    if(!checkEmpty(this.file, "人脸图片"))
                        return;
                    var url = this.uri;

                    //axios.js 上传文件要用 formData 这种方式
                    var formData = new FormData();
                    formData.append("image", this.file);
                    formData.append("name", this.bean.name);
                    formData.append("user_id", this.bean.user_id);
                    formData.append("sex", this.bean.sex);
                    formData.append("birthday", this.bean.birthday);
                    formData.append("state", this.bean.state);
                    formData.append("tel", this.bean.tel);
                    formData.append("address", this.bean.address);
                    formData.append("emgContactName", this.bean.emgContactName);
                    formData.append("emgContactNum", this.bean.emgContactNum);
                    formData.append("criminalRecord", this.bean.criminalRecord);
                    axios.post(url,formData).then(function(response){
                        vue.list(0);
                        vue.bean = { id: 0, name: '', hp: '0'};
                        $("#categoryPic").val('');
                        vue.file = null;
                    });
                },
                deleteBean: function (id) {
                    if(!checkDeleteLink())
                        return;
                    var url = this.uri+"/"+id;
                    // alert(url)
                    axios.delete(url).then(function(response){

                        if(0!=response.data.length){
                            alert(response.data);
                        }
                        else{
                            vue.list(0);
                        }
                    });
                },

                getFile: function (event) {
                    this.file = event.target.files[0];
                },
                jump: function(page){
                    jump(page,vue); //定义在adminHeader.html 中
                },
                jumpByNumber: function(start){
                    jumpByNumber(start,vue);
                }
            }
        });
    });

</script>
<div id="workingArea" >
    <h1 class="label label-info" >人脸管理</h1>
    <br>
    <br>
    <input v-model='search' />
    <input type="button" value="搜索" @click="searchFunc">
    <div class="listDataTableDiv">
        <table class="table table-striped table-bordered table-hover  table-condensed">
            <thead>
            <tr class="info">
                <th>身份证号</th>
                <!--<th>编辑</th>-->
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="id in users " >
                    <td>{{id}}</td>

                    <!--<td>-->
                        <!--<a :href="'admin_category_edit?id=' + bean.id "><span class="glyphicon glyphicon-edit"></span></a>-->
                    <!--</td>-->
                    <td>
                        <a href="#nowhere"  @click="deleteBean(id)"><span class="   glyphicon glyphicon-trash"></span></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div th:replace="include/admin/adminPage::html" ></div>
    <div class="panel panel-warning addDiv">
        <div class="panel-heading">新增人脸</div>
        <div class="panel-body">
            <table class="addTable">
                <tr>
                    <td>姓名</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.name" type="text" class="form-control"></td>
                </tr>

                <tr>
                    <td>身份证号</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.user_id" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>照片</td>
                    <td>
                        <input id="categoryPic" accept="image/*" type="file" name="image" @change="getFile($event)" />
                    </td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.sex" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>生日（20201201）</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.birthday" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>状态（正常：0，走失：1，在逃：2）</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.state" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>电话</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.tel" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>地址</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.address" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>紧急联系人姓名</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.emgContactName" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>紧急联系人电话</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.emgContactNum" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>犯罪记录</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.criminalRecord" type="text" class="form-control"></td>
                </tr>
                <tr class="submitTR">
                    <td colspan="2" align="center">
                        <a href="#nowhere"  @click="add" class="btn btn-success">提交</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div th:replace="include/admin/adminFooter::html" ></div>
</body>
</html>
